<!--
 * @Description: 预约单打印
 * @Autor: 何兴家
 * @Date: 2021-02-07 09:28:20
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-02-08 14:05:13
-->
<template>
  <div ref="print" style="width:100%; margin: 0 auto;" v-show="isPreview">
    <div style="padding: 15px">
      <table>
        <tr>
          <td>经销商：</td>
          <td>{{ data.dealerName }}</td>
          <td>登记日期</td>
          <td colspan="3">{{ data.createdAt }}</td>
        </tr>
        <tr>
          <td>服务顾问</td>
          <td>{{ data.bookServiceAdvisor }}</td>
          <td>维修技师</td>
          <td colspan="3">{{ data.chiefTechnician }}</td>
        </tr>
        <tr>
          <td>预约编号</td>
          <td>{{ data.bookingOrderNo }}</td>
          <td>客户主动预约 <input type="checkbox" /></td>
          <td>经销商主动预约 <input type="checkbox" /></td>
          <td>客户回访 <input type="checkbox" /></td>
        </tr>
      </table>

      <table class="bor">
        <tr>
          <td style="width: 25%">客户姓名</td>
          <td>{{ data.contactorName }}</td>
          <td style="width: 25%">联系电话</td>
          <td>{{ data.contactorMobile }}</td>
        </tr>
        <tr>
          <td>车牌号码</td>
          <td>{{ data.license }}</td>
          <td>公里数</td>
          <td>{{ data.inMileage }}</td>
        </tr>
        <tr>
          <td colspan="2">预定进厂日期</td>
          <td colspan="2">{{ data.bookingComeTime }}</td>
        </tr>
        <tr>
          <td colspan="2">预定交车日期</td>
          <td colspan="2"></td>
        </tr>
      </table>

      <table class="bor">
        <tr>
          <td>客户其他需求:</td>
          <td></td>
        </tr>
        <tr>
          <td style="height: 48px">客户陈述:</td>
          <td style="border-bottom: none">{{ data.customerDesc }}</td>
        </tr>
        <tr>
          <td>首日预约状态:</td>
          <td style="border-top: none"><input type="checkbox" /> 成功 <input type="checkbox" /> 不成功</td>
        </tr>
        <tr>
          <td>首次预约不成功的原因:</td>
          <td></td>
        </tr>
        <tr>
          <td>进店前一天预约提醒:</td>
          <td><input type="checkbox" />确认 <input type="checkbox" />延期 新确认时间：__________ <input type="checkbox" />放弃预约</td>
        </tr>
        <tr>
          <td>进店前一小时预约提醒</td>
          <td><input type="checkbox" />确认 <input type="checkbox" />延期 新确认时间：__________ <input type="checkbox" />放弃预约</td>
        </tr>
        <tr>
          <td colspan="2">本单一式两联，首联服务顾问留存 二联交车间主管进行派工</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'template1',
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss')
    };
  },
  computed: {},
  methods: {
    fillInToDom() {
      this.isPreview = true;
    }
  },
  mounted() {
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  }
};
</script>
